
<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>日常管理</el-breadcrumb-item>
      <el-breadcrumb-item>会议管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>会议预约</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索框 -->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="会议室名" prop="cname">
        <el-input v-model="searchFormModel.cname" placeholder="请输入会议室名称" clearable />
      </el-form-item>
      <el-form-item label="会议室编号" prop="cno">
        <el-input v-model="searchFormModel.cno" placeholder="请输入会议室编号" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchOnSubmit">
          <el-icon><Search /></el-icon>&nbsp;查询
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  表格-->
  <div style="margin:20px">
    <el-table :data="info" stripe border style="width: 100%">
      <el-table-column prop="id" label="序号" v-if="show"/>
      <el-table-column prop="cname" label="会议室名"/>
      <el-table-column prop="cno" label="会议编号"/>
      <el-table-column prop="caption" label="特殊设备说明"  />
      <el-table-column prop="position" label="位置"  />
      <el-table-column prop="contain" label="容纳人数" />
      <el-table-column prop="note" label="备注" />
      <el-table-column prop="status" label="当前状态" />
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button
              size="small"
              type="warning"
              @click="tableEditHandler(scope.$index, scope.row)">
            <el-icon><DataLine /></el-icon>&nbsp;预约
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,8]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!--  编辑-->
  <el-dialog v-model="dialogEditState" title="预约申请" width="380">
    <div>
      <el-form ref="formEditRef" :model="formEdit"
               label-width="120px">
        <el-form-item prop="applyDept" label="申请部门">
          <el-input v-model="formEdit.applyDept" ></el-input>
        </el-form-item>
        <el-form-item prop="meeting" label="会议题目">
          <el-input v-model="formEdit.meeting" ></el-input>
        </el-form-item>
        <el-form-item prop="cname" label="会议室名">
          <el-input v-model="formEdit.cname" disabled ></el-input>
        </el-form-item>
        <el-form-item prop="startDt" label="计划开始时间">
          <el-date-picker
              v-model="formEdit.startDt"
              type="datetime"
              placeholder="请选择时间"
              format="YYYY-MM-DD HH:mm:ss"
              @change="formatDate"
          />
        </el-form-item>
        <el-form-item prop="endDt" label="计划结束时间">
          <el-date-picker
              v-model="formEdit.endDt"
              type="datetime"
              placeholder="请选择时间"
              format="YYYY-MM-DD HH:mm:ss"
              @change="formatDate1"
          />
        </el-form-item>
        <el-form-item prop="contestant" label="参与人数">
          <el-input v-model="formEdit.contestant" disabled></el-input>
        </el-form-item>
        <el-form-item prop="content" label="会议内容">
          <el-input v-model="formEdit.content" ></el-input>
        </el-form-item>
        <el-form-item prop="isMonogram" label="是否有会标">
          <el-radio-group v-model="formEdit.isMonogram">
            <el-radio :label="true" >是</el-radio>
            <el-radio :label="false" >否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="MonogramCon" label="会标内容">
          <el-input v-model="formEdit.MonogramCon" ></el-input>
        </el-form-item>
        <el-form-item prop="chamberType" label="会议类型">
          <el-input v-model="formEdit.chamberType" ></el-input>
        </el-form-item>
        <el-form-item prop="applyMan" label="申请人">
          <el-input v-model="formEdit.applyMan" ></el-input>
        </el-form-item>
        <el-form-item prop="isScreen" label="是否投屏">
          <el-radio-group v-model="formEdit.isScreen">
            <el-radio :label="true" >是</el-radio>
            <el-radio :label="false" >否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="note" label="备注">
          <el-input v-model="formEdit.note" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditOnReset">取消</el-button>
        <el-button type="primary"  @click="checkRoomAvailability" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {ArrowRight, Delete, DataLine,Search} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/daily";
import {ElMessage, ElMessageBox} from "element-plus";
onMounted(()=>{
  getInfo();
})
//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const info=ref([]);
//搜索
const searchFormRef=ref();
const searchFormModel=reactive({
  cname:'',
  cno:'',
})
const  getInfo=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    status:'启用'
    // 初始时不包含其他参数
  };
  if (searchFormModel.cname && searchFormModel.cname.trim() !== ''){
    params.cname=searchFormModel.cname.trim();
  }
  if (searchFormModel.cno && searchFormModel.cno.trim() !== ''){
    params.cno=searchFormModel.cno.trim();
  }
  request({
    url:'/chamber/page',
    method:'get',
    params,
  }).then((req)=>{
    if (200==req.data.errorCode){
      info.value=req.data.data.records;
      totals.value=req.data.data.total;
    }
  })
}
const searchOnSubmit=()=>{
  getInfo();
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getInfo();
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getInfo();
}
//编辑
const formEditRef = ref()

const formEditData = {
  cname:'',
  applyDept:'',
  meeting:'',
  startDt:'',
  endDt:'',
  contestant:'',
  content:'',
  isMonogram:'',
  MonogramCon:'',
  chamberType:'',
  applyMan:'',
  isScreen:'',
  note:'',
  reserveStatus:''
}
const formEdit = reactive({...formEditData})

////////////时间格式转换
const formatDate=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formEdit.startDt = '';
    setEndTime(); // 设置结束时间为开始时间加一个小时
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  // 组合成所需的格式
  formEdit.startDt = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  setEndTime(); // 设置结束时间为开始时间加一个小时
}

const formatDate1=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formEdit.endDt = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  // 组合成所需的格式
  formEdit.endDt = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 设置结束时间为开始时间加一个小时
const setEndTime = () => {
  if (formEdit.startDt) {
    const startTime = new Date(formEdit.startDt);
    startTime.setHours(startTime.getHours() + 1); // 加一个小时
    formEdit.endDt = `${startTime.getFullYear()}-${(startTime.getMonth() + 1).toString().padStart(2, '0')}-${startTime.getDate().toString().padStart(2, '0')} ${startTime.getHours().toString().padStart(2, '0')}:${startTime.getMinutes().toString().padStart(2, '0')}:${startTime.getSeconds().toString().padStart(2, '0')}`;
  }
}

const tableEditHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  formEdit.cname = rowData.cname
  formEdit.contestant=rowData.contain
  dialogEditState.value = true
}
const dialogEditState = ref(false)

const checkRoomAvailability = () => {
  const params = {
    cname: formEdit.cname,
    startDt: formEdit.startDt,
    endDt: formEdit.endDt,
  };
  request({
    url: '/chamber/reserve/check',
    method: 'get',
    params,
  }).then(response => {
    if (response.data.errorCode == 200 ) {
      // 会议室不可用，提示用户
      ElMessage({
        type: 'error',
        message: '该会议室在指定时间段内已被预约',
      });
      Object.assign(formEdit , formEditData)
      dialogEditState.value = false
    } else {
      // 会议室可用，继续提交预约申请
      dialogEditOnSubmit();
    }
  })
};



const dialogEditOnSubmit = () => {
  request({
    url: '/chamber/reserve/add',
    method: 'post',
    data: formEdit,
  }).then(req => {
    if (200 == req.data.errorCode){
      ElMessage({
        type:'success',
        message:req.data.msg
      })
      Object.assign(formEdit , formEditData)
      getInfo();
    }
  })
  dialogEditState.value=false;
}
const dialogEditOnReset = () => {
  Object.assign(formEdit , formEditData)
  dialogEditState.value = false
}
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
</style>